<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>智能象棋对战系统</title>
  <link rel="stylesheet" href="./chessboard-1.0.0.min.css">
  <link rel="stylesheet" href="./styles.css">
 
</head>
<body>
  <div id="board"></div>

  <div class="control-panel">
    <div class="header">
      <h1><i class="fas fa-robot"></i> 智能象棋系统</h1>
      <div class="toolbar">
        <button id="startBtn"><i class="fas fa-play"></i> 开始对战</button>
        <button id="pauseBtn"><i class="fas fa-pause"></i> 暂停</button>
        <button id="resetBtn"><i class="fas fa-sync-alt"></i> 重置</button>
        <button id="analysisToggle"><i class="fas fa-chart-bar"></i> 分析面板</button>
      </div>
    </div>

    <div class="eval-bar">
      <div id="evalIndicator"></div>
    </div>

    <div class="ai-panel" id="blue-panel">
      <h3><i class="fas fa-tint"></i> 蓝方分析</h3>
      <div class="stats">
        <p>深度: <span id="blue-depth">0</span></p>
        <p>评估: <span id="blue-eval">0.00</span></p>
        <p>胜率: <span id="blue-winrate">0%</span></p>
        <p>开局: <span id="blue-opening">-</span></p>
        <p>预测着法: <span id="blue-pv">-</span></p>
      </div>
    </div>

    <div class="ai-panel" id="red-panel">
      <h3><i class="fas fa-fire"></i> 红方分析</h3>
      <div class="stats">
        <p>深度: <span id="red-depth">0</span></p>
        <p>评估: <span id="red-eval">0.00</span></p>
        <p>胜率: <span id="red-winrate">0%</span></p>
        <p>开局: <span id="red-opening">-</span></p>
        <p>预测着法: <span id="red-pv">-</span></p>
      </div>
    </div>

    <div class="chart-container">
      <canvas id="evalChart"></canvas>
    </div>

    <div class="settings-panel">
      <h4><i class="fas fa-cog"></i> 显示设置</h4>
      <div class="form-group">
        <label>玩家模式:</label>
        <select id="playerSelect" class="form-control">
          <option value="none">观战模式</option>
          <option value="w">蓝方 (先手)</option>
          <option value="b">红方 (后手)</option>
        </select>
      </div>
      <div class="form-group">
        <label>思考速度:</label>
        <input type="range" id="speedControl" min="500" max="3000" value="1800">
        <span id="speedValue">1800ms</span>
      </div>
      <div class="form-group">
        <label>显示AI箭头:</label>
        <input type="checkbox" id="arrowToggle" checked>
      </div>
    </div>

    <div class="history-log">
      <h4><i class="fas fa-history"></i> 对战日志</h4>
      <div id="gameLog"></div>
    </div>
  </div>

  <audio id="moveSound" src="./sounds/move.mp3"></audio>
  <audio id="captureSound" src="./sounds/start.mp3"></audio>
  <audio id="checkmateSound" src="./sounds/win.mp3"></audio>

  <script src="./jquery-3.6.0.min.js"></script>
  <script src="./chess.js"></script>
  <script src="./chessboard-1.0.0.min.js"></script>
  <script src="./stockfish.js"></script>
  <script src="./chart.js"></script>
  <script src="./game.js"></script>
</body>
</html>
